<template>
  <a-drawer
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
  >

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading"class="drawer-content">
      <a-form :form="form">

        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" placeholder="请输入用户账号" v-decorator="[ 'username',  {rules:getValidator(true, 20, 3, null, true)}]" :readOnly="!!model.id"/>
        </a-form-item>


        <a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input autocomplete="off" placeholder="请输入用户名称" v-decorator="[ 'realname', {rules:getValidator(true, 100, null, null, true)}]" />
        </a-form-item>

        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <ak-select-multiple-tag :url="`${sysRoleUrl.named}?columns=name`"
                                  v-decorator="[ 'roleListIds',{}]"/>
        </a-form-item>
        <!--部门分配-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="归属机构">
          <ak-tree-select :url="`${sysDepartUrl.tree}?_v=${version}`"
                                   v-decorator="[ 'sysDepartId']"/>
        </a-form-item>
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="管理机构">
          <ak-tree-select-multiple :url="`${sysDepartUrl.tree}?_v=${version}`"
                                   v-decorator="[ 'leaderDepartsIds']"/>
        </a-form-item>
        <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-upload :fileLength="1" type="sysUserHeaderImg"  v-decorator="['headimg', {initialValue:''}]"></ak-upload>
        </a-form-item>

        <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-date-picker  v-decorator="['birthday',{initialValue:''}]"></ak-date-picker>
        </a-form-item>

        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-dict-select-tag dict-code="SexEnum" v-decorator="['sex', {}]"></ak-dict-select-tag>
        </a-form-item>

        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" placeholder="请输入邮箱" v-decorator="[ 'email', {rules:getValidator(false, 100, null, new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/), true)}]" />
        </a-form-item>

        <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input autocomplete="off" placeholder="请输入手机号码"  v-decorator="[ 'phone',{rules:getValidator(false, 20, null, null, true)}]" />
        </a-form-item>
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <ak-dict-select-tag dict-code="UserStatusEnum" v-decorator="[ 'status',{rules:getValidator(true, null, null, null, false)}]" />
        </a-form-item>


      </a-form>
    </a-spin>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>

  import moment from 'moment'
  // 引入搜索部门弹出框的组件
  import { getAction } from '../../../api/manage'
  import AkUpload from '../../../components/akfh/AkUpload'
  import AkDictSelectTag from '../../../components/akfh/AkDictSelectTag';
  import {sysRoleUrl, sysUserUrl, sysDepartUrl} from '../../../api/url'
  import AkfhModelDrawMixin from "../../../mixin/AkfhModelDrawMixin";
  import AkSelectMultipleTag from "../../../components/akfh/AkSelectMultipleTag";
  import AkTreeSelectMultiple from "../../../components/akfh/AkTreeSelectMultiple";
  import AkDatePicker from "../../../components/akfh/AkDatePicker";
  import AkTreeSelect from "../../../components/akfh/AkTreeSelect";

  export default {
    name: "UserModal",
    mixins:[AkfhModelDrawMixin],
    components: {
      AkTreeSelect,
      AkDatePicker,
      AkTreeSelectMultiple,
      AkSelectMultipleTag,
      AkDictSelectTag,
      AkUpload
    },
    data () {
      return {
        entity:'SysUserEntity',
        confirmDirty: false,
        dateFormat:"YYYY-MM-DD",

        url: sysUserUrl,
        sysRoleUrl:sysRoleUrl,
        sysDepartUrl:sysDepartUrl

      }
    },
    methods: {

      moment,



      validateEmail(rule, value, callback){
        if(!value){
          callback()
        }else{
          if(new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(value)){
            this.doDulicateCheck(rule, value, callback);
          }else{
            callback("请输入正确格式的邮箱!")
          }
        }
      },
      validatePhone(rule, value, callback){
        if(!value){
          callback()
        }else{
          if(new RegExp(/^1[0-9]{10}$/).test(value)){
            this.doDulicateCheck(rule, value, callback);
          }else{
            callback("请输入正确的手机号!")
          }
        }
      },
      handleConfirmBlur  (e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      },

    }
  }
</script>

<style scoped>

</style>
